<template>
  <div>
    <div class="main-title">
      <img src="/chuneng/img/title-border-1.png" />
      <!-- <div style="text-align: center">
        <svg viewBoxs="0 0 600 500" style="width: 400px">
          <defs>
            <linearGradient
              id="SVGID_1_"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="0"
              y2="90"
            >
              <stop offset="0" style="stop-color: #ffffff" />
              <stop offset="0.9" style="stop-color: #6bdbfa" />
              <stop offset="1" style="stop-color: #6bdbfa" />
            </linearGradient>
          </defs>
          <text
            style="fill: url(#SVGID_1_); font-size: 40px; font-weight: bolder"
            text-anchor="middle"
            x="50%"
            y="50%"
          >
            电池串运行状态评估
          </text>
        </svg>
      </div> -->
      <!-- 使用封装的cnsvg组件 -->
      <cn-svg
        :viewbox="'0 0 600 500'"
        :svgstyle="'width: 400px;'"
        :textname="'电池串运行状态估计'"
      ></cn-svg>
      <div
        style="
          position: relative;
          transform: translateY(-20px);
          padding-left: 17%;
        "
      >
        <input
          class="cell-input"
          type="select"
          placeholder="请输入电池串编号："
          ref="cell-input"
        />
        <div class="time-container">
          <span class="time-part date"></span>
          <span class="time-part time"></span>
        </div>
        <button class="btn-search" @click="init">查询</button>
      </div>
    </div>
    <div class="main-content">
      <back-1 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">电压一致性</div>
          <div style="font-size: 16px">Voltage Consistency</div>
        </div>
        <roll-chart :option="dyyz" :step1="12" :step2="1" />
      </back-1>
      <gap style="width: 15%" />
      <back-2 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">电压极差</div>
          <div style="font-size: 16px">Voltage Range</div>
        </div>
        <roll-chart :option="dyjc" :step1="12" :step2="1" />
      </back-2>
      <gap style="width: 15%" />
      <back-3 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">温度极差</div>
          <div style="font-size: 16px">Temperature Range</div>
        </div>
        <roll-chart :option="wdjc" :step1="12" :step2="1" />
      </back-3>
      <gap style="width: 15%" />
      <back-1 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">SOC极差</div>
          <div style="font-size: 16px">SOC Range</div>
        </div>
        <roll-chart :option="socjc" :step1="12" :step2="1" />
      </back-1>
    </div>
  </div>
</template>

<script>
import Back1 from "./Back1.vue";
import Back2 from "./Back2.vue";
import Back3 from "./Back3.vue";
import Gap from "./Gap.vue";
import RollChart from "./RollChart.vue";
import notify from "@/utils/notify";
import { generateXAxis, generateYAxis } from "../utils/chart_tools";
import cnSvg from "./cn-svg.vue";
import { mapGetters } from "vuex";
export default {
  components: { Back1, Back2, Back3, Gap, RollChart, cnSvg },
  data() {
    return {
      dyyz: {},
      dyjc: {},
      wdjc: {},
      socjc: {},
    };
  },
  computed: {
    ...mapGetters(["cell_group"]),
  },
  watch:{
    // eslint-disable-next-line
    cell_group(val){

      this.init();
    }
  },
  methods: {
    async init() {
      // const loading = this.$loading({
      //   lock: true,
      //   text: "加载中",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0.3, 0.7)",
      // });
      try {
        let cell = this.$refs["cell-input"].value;
        // notify.notify(cell, 1)
        let data;
        if (cell === "") {
          data = this.cell_group[0];
        } else {
          try {
            cell = parseInt(cell);
          } catch {
            notify.notify("请输入正确的电池串编号", 1);
            cell = 0;
          }
          data = this.cell_group[cell % this.cell_group.length];
        }
        this.process_dyyz(data['电压一致']);
        this.process_dyjc(data['电压极差']);
        this.process_wdjc(data['温度极差']);
        this.process_socjc(data['SOC极差']);
      } catch (e) {
        console.log(e);
      }
      // this.process_dyyz();
      // this.process_dyjc();
      // this.process_wdjc();
      // this.process_socjc();
    },
    process_dyyz(data) {
      // data =
      // let p = this.$refs["cell-input"].value;
      // let r = Math.random() * 0.001;
      let opt = {
        // 折线颜色修改,默认是蓝色
        color: ["#66d0e3"],
        grid: {
          left: "20%",
        },
        // legend: {
        //   data: ["Pack" + p],
        // },
        xAxis: generateXAxis(data.length),

        // 传入纵坐标名称与单位
        yAxis: generateYAxis({}),

        series: {
          name: "电压一致性",
          data: data,
          grid: false,
          type: "line",
          showSymbol: false,
        },
      };
      this.dyyz = opt;
    },
    process_dyjc(data) {
      // data = Vjizhi.jizhi.pack1;
      // data = Vjizhi.jizhi.pack1;
      // let p = this.$refs["cell-input"].value;
      // let r = Math.random() * 0.01;
      let opt = {
        // 折线颜色修改,默认是蓝色
        color: ["#66d0e3"],
        grid: {
          left: "20%",
        },
        // legend: {
        //   data: [`Pack${p}`],
        // },
        xAxis: generateXAxis(data.length),

        // 传入纵坐标名称与单位
        yAxis: generateYAxis({}),

        series: {
          name: `电压极差`,
          type: "line",
          data: data,
          showSymbol: false,
        },
      };
      this.dyjc = opt;
    },
    process_wdjc(data) {
      // data = Tjizhi.jizhi.pack1;
      // let p = this.$refs["cell-input"].value;
      // let r = Math.random() * 0.001;
      // if(Math.max(data) > 10) {
        // console.log(data)
      // }
      let opt = {
        // 折线颜色修改,默认是蓝色
        color: ["#66d0e3"],
        grid: {
          left: "20%",
        },
        // legend: {
        //   data: [`Pack${p}`],
        // },

        xAxis: generateXAxis(data.length),

        // 传入纵坐标名称与单位
        yAxis: generateYAxis({}),

        series: {
          name: `温度极差`,
          type: "line",
          data: data,
          showSymbol: false,
        },
      };
      this.wdjc = opt;
    },
    process_socjc(data) {
      // data = SOCjizhi.jizhi.pack1;
      //  data = Array(1500).fill(1);
      // let p = this.$refs["cell-input"].value;
      // let r = Math.random() * 0.001;
      let opt = {
        // 折线颜色修改,默认是蓝色
        color: ["#66d0e3"],
        grid: {
          left: "20%",
        },
        // legend: {
        //   data: [`Pack${p}`],
        // },
        xAxis: generateXAxis(data.length),

        // yAxis: generateYAxis({min: 0, max: 0.002}),

        // Y轴自适应修改 by xiehong
        yAxis: generateYAxis({
          
        }),

        series: {
          name: `SOC极差`,
          type: "line",
          
          data: data,
          showSymbol: false,
        },
      };
      this.socjc = opt;
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
</style>